<template>
  <view class="container">
    <view class="product-list">
      <view class="product-item" v-for="(product, index) in currentProducts" :key="index" @click="navigateToDetail(product)">
        <image :src="product.image" mode="aspectFill" class="product-image"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-desc">{{ product.description }}</text>
          <view class="price-section">
            <text class="product-price">¥{{ product.price }}</text>
            <text class="product-sales">已售 {{ product.sales }}件</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      allProducts: {
        fruit: [
          { id: 1, name: '红富士苹果', price: 29.9, image: '/static/images/4.png', description: '新鲜红富士苹果，甜脆可口', sales: 235 },
          { id: 2, name: '海南芒果', price: 35.8, image: '/static/images/4.png', description: '海南特产芒果，香甜多汁', sales: 189 },
          { id: 3, name: '砀山梨', price: 25.9, image: '/static/images/4.png', description: '砀山特产梨，清甜多汁', sales: 156 }
        ],
        vegetable: [
          { id: 4, name: '有机生菜', price: 8.8, image: '/static/images/5.png', description: '无农药生菜，新鲜采摘', sales: 320 },
          { id: 5, name: '西红柿', price: 12.8, image: '/static/images/5.png', description: '新鲜西红柿，酸甜可口', sales: 258 },
          { id: 6, name: '黄瓜', price: 6.8, image: '/static/images/5.png', description: '新鲜黄瓜，脆嫩爽口', sales: 198 }
        ],
        seasoning: [
          { id: 7, name: '花椒', price: 28.0, image: '/static/images/6.png', description: '正宗花椒，麻香浓郁', sales: 145 },
          { id: 8, name: '八角', price: 15.8, image: '/static/images/6.png', description: '优质八角，香气四溢', sales: 167 },
          { id: 9, name: '桂皮', price: 12.8, image: '/static/images/6.png', description: '精选桂皮，香气浓郁', sales: 134 }
        ],
        oil: [
          { id: 10, name: '菜籽油', price: 68.0, image: '/static/images/7.png', description: '纯天然压榨菜籽油', sales: 89 },
          { id: 11, name: '花生油', price: 85.0, image: '/static/images/7.png', description: '农家自榨花生油', sales: 76 },
          { id: 12, name: '茶籽油', price: 128.0, image: '/static/images/7.png', description: '山茶籽压榨油', sales: 45 }
        ],
        meat: [
          { id: 13, name: '土鸡蛋', price: 45.0, image: '/static/images/4.png', description: '散养土鸡蛋，30枚', sales: 234 },
          { id: 14, name: '生鲜猪肉', price: 32.8, image: '/static/images/4.png', description: '新鲜猪肉，当日现杀', sales: 167 },
          { id: 15, name: '农家鸡', price: 68.0, image: '/static/images/4.png', description: '散养农家鸡', sales: 89 }
        ],
        handicraft: [
          { id: 16, name: '竹编篮', price: 99.0, image: '/static/images/4.png', description: '手工竹编篮，精美实用', sales: 45 },
          { id: 17, name: '草帽', price: 38.0, image: '/static/images/4.png', description: '手工编织草帽', sales: 67 },
          { id: 18, name: '布艺包', price: 78.0, image: '/static/images/4.png', description: '手工布艺包，民族特色', sales: 34 }
        ],
        dairy: [
          { id: 19, name: '纯牛奶', price: 58.0, image: '/static/images/4.png', description: '鲜榨纯牛奶，无添加', sales: 156 },
          { id: 20, name: '酸奶', price: 25.0, image: '/static/images/4.png', description: '自制酸奶，营养健康', sales: 189 },
          { id: 21, name: '奶酪', price: 35.0, image: '/static/images/4.png', description: '手工奶酪，浓香醇厚', sales: 78 }
        ],
        medicine: [
          { id: 22, name: '枸杞', price: 88.0, image: '/static/images/4.png', description: '宁夏枸杞，颗粒饱满', sales: 234 },
          { id: 23, name: '当归', price: 45.0, image: '/static/images/4.png', description: '道地当归，品质保证', sales: 156 },
          { id: 24, name: '党参', price: 68.0, image: '/static/images/4.png', description: '正宗党参，滋补养生', sales: 123 }
        ],
        processed: [
          { id: 25, name: '腊肠', price: 38.0, image: '/static/images/4.png', description: '农家腊肠，传统工艺', sales: 167 },
          { id: 26, name: '咸鸭蛋', price: 28.0, image: '/static/images/4.png', description: '手工咸鸭蛋，咸香适中', sales: 234 },
          { id: 27, name: '酱菜', price: 15.0, image: '/static/images/4.png', description: '农家酱菜，开胃下饭', sales: 289 }
        ]
      },
      currentCategory: '',
      currentProducts: []
    };
  },
  onLoad(options) {
    // 获取传递过来的分类参数
    if (options.category) {
      this.currentCategory = options.category;
      this.currentProducts = this.allProducts[this.currentCategory] || [];
      
      // 设置页面标题
      const titleMap = {
        fruit: '水果专区',
        vegetable: '蔬菜专区',
        seasoning: '调味专区',
        oil: '粮油专区',
        meat: '肉蛋专区',
        handicraft: '手工艺专区',
        dairy: '奶制品专区',
        medicine: '药材专区',
        processed: '加工品专区'
      };
      uni.setNavigationBarTitle({
        title: titleMap[this.currentCategory] || '商品列表'
      });
    }
  },
  methods: {
    navigateToDetail(product) {
      // 跳转到商品详情页
      uni.navigateTo({
        url: `/pages/spxq/detail?productInfo=${encodeURIComponent(JSON.stringify(product))}`,
        fail: (err) => {
          console.error('跳转失败：', err);
          uni.showToast({
            title: '跳转失败，请重试',
            icon: 'none'
          });
        }
      });
    }
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
}

.product-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-item {
  display: flex;
  background: #fff;
  border-radius: 15rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.product-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.product-desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.price-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-price {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.product-sales {
  font-size: 24rpx;
  color: #999;
}
</style> 